<template lang="html">
  <div class="signInfo-wrap">
    <section class="houseList-wrap">
      <house-list v-if="houseData" :houseInfo="houseData" detailPath="/signInfo"></house-list>
    </section>
    <!-- 支付信息 -->
    <section>
      <div class="title">
        <p>支付信息</p>
      </div>
      <group>
        <x-input
          :show-clear="false"
          title="租金"
          v-model="houseData.rentalPrice"
          text-align="right"
          :disabled="true"
          >
            <span slot="right">元 / 月</span>
          </x-input>

        <x-input
          :show-clear="false"
          title="押金"
          v-model="houseData.betPrice"
          text-align="right"
          :disabled="true">
          <span slot="right">元</span>
          </x-input>
      </group>
    </section>
    <!-- 租期选择 -->
    <section>
      <div class="title">
        <p>租期选择</p>
      </div>

      <group>
        <datetime
          v-model="startTime"
          placeholder="年/月/日"
          :display-format="format"
          :start-date="startDate"
          title="起租时间">
        </datetime>

        <div class="endTime-wrap">
          <p class="endTime-title">结束时间</p>
          <div class="endTime-inner">
            <div class="btns">
              <p
                class="btn"
                v-for="(item, index) in btns"
                :class="{active: index === activeIndex}"
                :key="index"
                @click="chooseEndTime(index)">{{item}}</p>
            </div>
            <div class="result">{{endTimeText}}</div>
          </div>
        </div>

        <selector
          title="交费周期"
          direction="rtl"
          value="按月交"
          plaholder="请选择交费周期"
          :options="['按月交']"
          :readonly="true"
        >
        </selector>
      </group>
    </section>

    <section class="signInfo-submit">
      <x-button type="primary" @click.native="submit">提交</x-button>
    </section>

    <x-dialog v-model="hintDialog" class="dialog-hint">
      <h3 class="infoConfirm-hint">申请成功</h3>
      <p class="hint-black">您可以去个人中心切换成租客查看我的订单进行跟踪和操作</p>
      <x-button type="primary" @click.native="$router.replace('/myOrderForRenter')">我的订单</x-button>
    </x-dialog>
  </div>
</template>

<script>
import { Datetime } from 'vux'
import moment from 'moment'
import houseList from '@/components/houseList'
export default {
  components: {
    Datetime,
    houseList
  },
  data () {
    return {
      startDate: moment().add(1, 'days').format('YYYY-MM-DD'),
      showPopup: false,
      startTime: '',
      format (val) {
        let strArr = val.split('-')
        return `${strArr[0]}年/${strArr[1]}月/${strArr[2]}日`
      },
      endTimeText: '年/月/日',
      endTime: '',
      activeIndex: -1,
      btns: ['一个月', '两个月', '半年', '一年', '两年'],
      houseData: {},
      hintDialog: false
    }
  },
  methods: {
    startTimeChange () {
      if (this.activeIndex !== -1) {
        this.chooseEndTime(this.activeIndex)
      }
    },
    chooseEndTime (index) {
      if (this.startTime === '') {
        this.$vux.toast.text('请先选择起租时间')
        return false
      }
      let monthsNum = 0
      switch (index) {
        case 0: // 一个月
          monthsNum = 1
          break
        case 1: // 两个月
          monthsNum = 2
          break
        case 2: // 半年
          monthsNum = 6
          break
        case 3: // 一年
          monthsNum = 12
          break
        case 4: // 两年
          monthsNum = 24
          break
      }
      this.activeIndex = index
      let endTime = moment(this.startTime, 'YYYY-MM-DD').add(monthsNum, 'months').format('YYYY-MM-DD')
      let endTimeArr = endTime.split('-')
      this.endTime = endTime
      this.endTimeText = `${endTimeArr[0]}年/${endTimeArr[1]}月/${endTimeArr[2]}日`
    },
    checkData (data) {
      if (data.beginTime === '') {
        this.$vux.toast.text('请选择起租时间')
        return false
      } else if (data.endTime === '') {
        this.$vux.toast.text('请选择结束时间')
        return false
      }
      return true
    },
    submit () {
      let persons = window.localStorage.getItem('tenantsInfo') || '[]'
      let personQuantity = JSON.parse(persons).length || 1
      let userInfo = JSON.parse(window.localStorage.getItem('userInfo') || '{}')
      let houseInfo = JSON.parse(window.localStorage.getItem('signHouseInfo'))
      let postData = {
        houseType: 2, // 房源类别
        apartmentId: houseInfo.apartment.id, // 公寓房源id
        landlordId: 216, // 房东id
        renterId: userInfo.id, // 租客id
        payCycle: 1, // 交费周期-按月交
        personQuantity, // 入住人数
        beginTime: this.startTime, // 开始时间
        endTime: this.endTime, // 结束时间
        billTime: this.endTime, // 账单日
        userId: userInfo.id, // 签约人id
        roomId: houseInfo.id, // 房间id
        persons, // 入住人信息
        money: houseInfo.rent// 租金
      }
      if (this.checkData(postData)) {
        this.$axiosPosting(this.$api.saveOrder4Apartment, postData).then(res => {
          if (res.code === '0000') {
            window.localStorage.setItem('tenantsInfo', '[]')
            this.hintDialog = true
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      }
    }
  },
  created () {
    let houseInfo = JSON.parse(window.localStorage.getItem('signHouseInfo'))
    this.houseData = {
      id: houseInfo.id || '',
      landlordId: houseInfo.partyAId || '',
      houseTitle: `${houseInfo.buildingName} ${houseInfo.roomName}` || '',
      coverImg: houseInfo.apartment.cover || '',
      address: houseInfo.apartment.address || '',
      rentalPrice: houseInfo.rent || '',
      betPrice: houseInfo.rent || '',
      highlights: houseInfo.highlights || '',
      createTime: houseInfo.apartment.createTime || '',
      area: houseInfo.area || ''
    }
  }
}
</script>

<style lang="less">
  .signInfo-wrap{
    min-height: 100vh;
    .houseList-wrap{
      padding-bottom: 6px;
      background: #f4f4f4;
    }
    .title{
      padding: 15px 0;
      box-sizing: border-box;
      p{
        padding-left: 12px;
        border-left: 3px solid #ff9600;
        font-size: 14px;
        line-height: 1.25;
        color: #585858;
      }
    }
    .endTime-wrap{
      position: relative;
      padding: 10px 15px;
      &:before{
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #d9d9d9;
        color: #d9d9d9;
        transform: scaleY(0.5);
      }
      .endTime-title{
        margin-bottom: 8px;
        color: #585858;
      }
      .endTime-inner{
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: flex-end;
      }
      .btns{
        display: flex;
        flex-wrap: wrap;
        flex-shrink: 0;
        width: 60%;
        .btn{
          width: 60px;
          height: 30px;
          text-align: center;
          line-height: 28px;
          margin-right: 9px;
          margin-top: 8px;
          font-size: 12px;
          color: #686868;
          border: 1px solid #bbb;
          border-radius: 3px;
          box-sizing: border-box;
          &.active{
            color: #ff9600;
            border-color: #ff9600;
          }
        }
      }
      .result{
        font-size: 14px;
        color: #777;
      }
    }
    .weui-cells{
      font-size: 14px;
      color: #585858;
      &:before{
        display: none;
      }
      .weui-cell{
        height: 45px;
        box-sizing: border-box;
      }
      &.vux-no-group-title{
        margin-top: 0;
      }
      .weui-input{
        font-size: 14px;
        color: #585858;
      }
      .vux-datetime, .vux-cell-placeholder{
        color: #777;
        p{
          color: #585858;
        }
      }
      .weui-input:disabled{
        -webkit-text-fill-color: #777;
        -webkit-opacity: 1;
        color: #777;
      }
      .weui-cell__ft{
        padding-right: 0;
        color: #777;
        &:after{
          display: none;
        }
      }
      .vux-cell-value{
        color: #777;
      }
    }
    .weui-label{
      font-size: 14px;
      color: #585858;
    }
    .signInfo-submit{
      margin-top: 75px;
    }
    .dialog-hint{
      .weui-dialog{
        padding: 15px;
        box-sizing: border-box;
        color: #343434;
        text-align: left;
        .infoConfirm-hint{
          font-size: 22px;
          text-align: center;
        }
        .hint-black{
          margin-bottom: 20px;
          font-size: 16px;
        }
      }
    }
  }
</style>
